<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<title>云平台——开发者账号服务</title>
<meta http-equiv="pragma" content="no-cache">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="keywords" content="万达,服务,账号">
<meta http-equiv="description" content="开发者账号">
<meta http-equiv="cache-control" content="no-cache">
<link rel="shortcut icon" href="resources/images/logo/logo64.png"/>
<jsp:include page="pages/outerfile.jsp" flush="true" />
 <style type="text/css">
.regist-container {
	position: relative;
	width: 100%;
	height: 100%;
	background:url(resources/images/home/regist_bg.png) center no-repeat;
}

.regist-container .main {
	position: absolute;
	left: 50%;
	top: 43%;
	margin-left: -316px;
	margin-top: -225px;
	width: 632px;
	height: 430px;
	border: 1px solid #cad1d8;
	border-radius: 4px;
}

.regist-container .main>.logo-info {
	float: left;
	width: 180px;
	height: 100%;
	background-color: #304669;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

.logo-info img {
	margin-top: 100px;
	margin-left: 45px;
}

.logo-info .logo-name {
	margin-top: 15px;
	font-size: 18px;
	color: #fff;
	text-align: center;
}

.logo-info .regist-name {
	color: #66c660;
    font-size: 16px;
    margin-top: 10px;
    padding: 8px;
    text-align: center;
    text-indent: 5px;
}

.regist-container .main>.right-container {
	height: 100%;
	margin-left: 180px;
	padding:15px 32px;
}

.right-container .row {
	height: 30px;
	font-size: 14px;
	margin-bottom: 3px;
	margin-top: 3px;
}

.right-container .prompt {
	margin-right: -7px;
	height: 20px;
	line-height: 25px;
	color: red;
	font-size: 12px;
	text-align: right;
}

.right-container .row span {
	margin-right: 8px;
}

.right-container .row input {
	width: 335px;
	height: 32px;
	border: 1px solid #cad1d8;
	border-radius: 4px;
	opacity: .6;
}
.right-container .row #validPhoneCode{
	width: 220px;
}
.registPhone{
}
.registActivation .result{
	color: #555;
	background: rgba(0, 0, 0, 0) url("resources/images/home/success.png") no-repeat scroll 0;
    overflow: hidden;
    padding-left: 70px;
    font-weight:nomal;
}
.registActivation .result em {
    color: red;
    font-style: normal;
}
.registActivation h4{
	font-weight:nomal;
	line-height: 28px;
    margin: 0;
    padding: 0;
    
}
.registActivation .yz_tip{
	font-size: 12px;
}
.registActivation .button_box {
    padding-top: 47px;
}
.registActivation .button_box a {
    background-color: #8fc400;
    border: 1px solid #7eac00;
    border-radius: 5px;
    color: #fff;
    display: inline-block;
    font-size: 16px;
    height: 28px;
    line-height: 28px;
    margin-left: 120px;
    text-align: center;
    width: 118px;
}
.registActivation .tips p a {
    color: #004d00;
}
.registActivation .tips {
    border-top: 1px dashed #ccc;
    color: #555;
    font-family: "microsoft yahei";
    margin-top: 60px;
    padding: 20px 0 0 0px;
}
.registActivation .tips p a:hover {
    color: red;
}
</style>

</head>
  <body>
	  <div class="regist-container" >
	  		<div class="main">
	  			<div class="logo-info">
	  				<img src="resources/images/logo/regist_logo.png" width="90px"/>
	  				<div class="logo-name">
	  					开发者账号服务
	  				</div>
	  			</div>
	  			<div class="right-container">
	  				<div class="registPhone">
	  					<!-- <div class="row">
	  					<span style="margin-left:3px;">用&nbsp;户&nbsp;&nbsp;名</span>
	  					<input type="text" id="name" name="usernames" onfocus="infocus(this)" value="" onblur="checkName(this)"/>
		  				</div> 
		  				<div class="prompt" id="namecheck"><span id="checkname1" style="color:#6c6c6c">以字母开头，允许字母数字下划线，4~16位的字节！</span> </div>
		  				-->
		  				<div class="row">
		  					<span>手&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;机</span>
		  					<input type="text" id="mobile" name="mobile" value="" onfocus="infocus(this)" onblur="checkMobile(this)"/>
		  				</div>
		  				<div class="prompt" id="mobilecheck"></div>
		  				<div class="row">
		  					<span>验&nbsp;证&nbsp;&nbsp;码</span>
		  					<input type="text" id="validPhoneCode" name="validPhoneCode" value="" onfocus="infocus(this)" onblur="checkCode(this)"/>
		  					<button class="btn"  id="codebutton" style="margin-left:6px;margin-top:-3px;height:36px;line-height:18px;width:105px;background-color:#5a7cb7;font-size:14px;color:#FFFFFF;" 
					            onclick="getcode()">获取验证码</button>
		  				</div>
		  				<div class="prompt" id="phoneCodecheck"></div>
		  				
		  				<div class="row">
		  					<span style="float:left;line-height:60px;">头&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;像</span>
						    <a href="javascript:;"> 
						         <img  src="resources/images/head/user-icon.png"  style="float:left;width:60px;height:60px;border-radius:100%;" id="img0"/>
						         <input type="file" id="headFile" name="headFile" class="inputstyle" value="" style="float:left;margin-left:-60px;width:60px;height:60px;border-radius:100%;opacity:0;cursor:pointer;" onchange="CheckFile(this.value)"/>
		  				    </a>
		  				    <span id="piccheck" style="float:left;margin-left:10px;line-height:60px;color:red;font-size: 12px;text-align: right;"></span>
		  				</div>
		  				<br>
	                    <br>
		  				<div class="row">
		  					<span>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</span>
		  					<input type="password" id="pwd" name="password" value="" onfocus="infocus(this)" onblur="checkPwd(this)"/>
		  				</div>
		  				<div class="prompt" id="pwdcheck"><span style="color:#6c6c6c">6~16位字符</span></div>
		  				
		  				<div class="row">
		  					<span>确认密码</span>
		  					<input type="password" name="repassword" id="repassword" value="" onfocus="infocus(this)" onblur="checkRePwd(this)"/>
		  				</div>
		  				<div class="prompt" id="repwdcheck"></div>
		  				
		  				<div style="margin-top:-2px;margin-left:50px;">
					       <div style="font-size:12px;color:#6c6c6c;" align="left" >
					            <input id="ischecked" type="checkbox" checked="checked"  style="width:17px;height:17px;float:left;margin-top:0px;" id="isAgree" value="true" />
					            <span>&nbsp;&nbsp;我已阅读并同意&nbsp;&nbsp;</span>
					            <a href="#" onclick="openPro()" style="color:#6c6c6c;">《万达云平台协议》</a>
					       </div>
				        </div>
				        <div>
					   		<button class="btn" style="height:32px;line-height:18px;width:207px;margin-top:14px;margin-left:50px;background-color:#66c660;font-size:15px;color:#FFFFFF;" onclick="checkAll()">确&nbsp;&nbsp;&nbsp;定</button>
				    	</div>
				    	<div style="margin-top:14px;">
					   		<a  style="margin-left:50px;font-size:12px;color:#ff6633;cursor: pointer;" onclick="changeRegist('email')">通过邮箱注册></a>
				    	</div>
	  				</div>
	  				<div class="registEmail" style="display: none;">
	  					<!-- <div class="row">
	  					<span style="margin-left:3px;">用&nbsp;户&nbsp;&nbsp;名</span>
	  					<input type="text" id="name" name="usernames" onfocus="infocus(this)" value="" onblur="checkName(this)"/>
		  				</div> 
		  				<div class="prompt" id="namecheck"><span id="checkname1" style="color:#6c6c6c">以字母开头，允许字母数字下划线，4~16位的字节！</span> </div>
		  				-->
		  				<div class="registInput">
		  					<div class="row">
			  					<span>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱</span>
			  					<input type="text" id="email" name="email" value="" onfocus="infocus(this)" onblur="checkEmail(this)"/>
			  				</div>
			  				<div class="prompt" id="emailcheck"></div>
			  				
			  				<div class="row">
			  					<span style="float:left;line-height:60px;">头&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;像</span>
							    <a href="javascript:;"> 
							         <img  src="resources/images/head/user-icon.png"  style="float:left;width:60px;height:60px;border-radius:100%;" id="img0"/>
							         <input type="file" id="headFile" name="headFile" class="inputstyle" value="" style="float:left;margin-left:-60px;width:60px;height:60px;border-radius:100%;opacity:0;cursor:pointer;" onchange="CheckFile(this.value)"/>
			  				    </a>
			  				    <span id="piccheck" style="float:left;margin-left:10px;line-height:60px;color:red;font-size: 12px;text-align: right;"></span>
			  				</div>
			  				<br>
		                    <br>
			  				<div class="row">
			  					<span>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</span>
			  					<input type="password" id="pwd" name="password" value="" onfocus="infocus(this)" onblur="checkPwd(this)"/>
			  				</div>
			  				<div class="prompt" id="pwdcheck"><span style="color:#6c6c6c">6~16位字符</span></div>
			  				
			  				<div class="row">
			  					<span>确认密码</span>
			  					<input type="password" name="repassword" id="repassword" value="" onfocus="infocus(this)" onblur="checkRePwd(this)"/>
			  				</div>
			  				<div class="prompt" id="repwdcheck"></div>
			  				
			  				<div style="margin-top:-2px;margin-left:50px;">
						       <div style="font-size:12px;color:#6c6c6c;" align="left" >
						            <input id="ischecked" type="checkbox" checked="checked"  style="width:17px;height:17px;float:left;margin-top:0px;" id="isAgree" value="true" />
						            <span>&nbsp;&nbsp;我已阅读并同意&nbsp;&nbsp;</span>
						            <a href="#" onclick="openPro()" style="color:#6c6c6c;">《万达云平台协议》</a>
						       </div>
					        </div>
					         <div>
						   		<button class="btn" style="height:32px;line-height:18px;width:207px;margin-top:14px;margin-left:50px;background-color:#66c660;font-size:15px;color:#FFFFFF;" onclick="checkAll()">注&nbsp;&nbsp;&nbsp;册</button>
					    	</div>
					    	<div style="margin-top:14px;">
						   		<a  style="margin-left:50px;font-size:12px;color:#ff6633;cursor: pointer;" onclick="changeRegist('phone')">通过手机号注册></a>
					    	</div>
		  				</div>
		  				<div class="registActivation" style="display: none;">
			  				<div class="row">
			  					<div class="result">
			  						<h4>您的邮箱帐号已创建。<br />已发送验证邮件到 <em>550721284@qq.com</em></h4>
			  					</div>
			  					<div class="yz_tip">
						        	<p>请您进入邮箱中点击验证链接完成注册，然后用您的新邮箱帐号和密码登录。</p>
						        </div>
			  					 <div class="button_box">
						        	<a href="http://mail.qq.com" target="_blank">去邮箱验证</a>
						        </div>
						        <div class="tips">
						        	<h4>收不到邮件？</h4>
						            <p><span id="sendmail">请检查您的垃圾箱或广告箱，邮件有可能被误认为垃圾或广告邮件，或选择<a href="javascript:QRegister.MailRegister.SendMail();">重发验证邮件</a>。</span><span id="sendmailtip"></span><br />如重发验证邮件仍无法收到，请换个邮箱再试试<!-- <br /><a href="http://wwwploy.qidian.com/helpcenter/default.aspx" target="_blank">了解如何把文学通行证的邮件列为白名单。</a> --></p>
						        </div>
						        
			  				</div>
		  				</div>
	  				</div>
	  			</div>
	  		</div>
	  </div>
	  <div id="alertDialog" class="win_dialog"></div>
	  <script type="text/javascript">
	  	var checkImg=true;
		var checkEmailResult=false;
		var checkMobileResult=false;
		var checkPwdResult=false;
		var checkRePwdResult=false;
		var checkCodeResult=false;
		var sendcode="";
		
		function infocus(obj){
			$(obj).css("border-color","#468af9");
		}
		function changeRegist(str){
			if(str=="email"){
				resetValue();
				$(".regist-container .main").css("height",380);
				$(".registPhone").css("display","none");
				$(".registEmail").css("display","block");
				
			}else if(str=="phone"){
				resetValue();
				$(".regist-container .main").css("height",430);
				$(".registEmail").css("display","none");
				$(".registPhone").css("display","block");
			}
		}
	  	/* function checkName(obj){
	  	 	var username=$("#name").val();
			var reg=/^[a-zA-Z][a-zA-Z0-9_]{3,15}$/;
			if(username==""||username==" "){
				$("#namecheck").html("用户名不能为空");
				checkNameResult=false;
			}else if(!reg.test(username)){
				$("#namecheck").html("字母开头，允许字母数字下划线，4~16位的字符！");
				checkNameResult=false;
			}else{
				$("#namecheck").html("");
				checkNameResult=true;
			}
			$(obj).css("border-color","#34495e");
	  	 }  */
	  	 
	  	 function checkEmail(obj){
	  	 	var email=$("#email").val();
			//var reg=/^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@([a-zA-Z0-9]*(\.[-a-zA-Z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i;
			var reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
			if(email==""||email==" "){
				$("#emailcheck").html("邮箱不能为空");
				checkEmailResult=false;
			}else if(!reg.test(email)){
				$("#emailcheck").html("邮箱格式不正确");
				checkEmailResult=false;
			}else if(email.length>64){
				$("#emailcheck").html("邮箱长度过长,长度应小于64个字符");
				checkEmailResult=false;
			}else{
				if(checkEmailResult){
					$("#emailcheck").html("");
					checkEmailResult=true;
					checkMobileResult=true;
				}else{
					$.getJSON("user/checkEmail",function(r){
						if(r.code==214){
							$("#emailcheck").html("");
							checkEmailResult=true;
							checkMobileResult=true;
						}else{
							$("#emailcheck").html("邮箱已使用");
							checkEmailResult=false;
						}
					});
				}
			}
			$(obj).css("border-color","#34495e");
	  	 }
	  	 
	  	 function checkMobile(obj){
	  	 	var mobile=$("#mobile").val();
			var reg1=/^1[3|4|5|8]\d{9}$/;
			if(mobile==""||mobile==" "){
				$("#mobilecheck").html("手机号码不能为空");
				checkMobileResult=false;
			}else if(!reg1.test(mobile)){
				$("#mobilecheck").html("手机格式输入错误");
				checkMobileResult=false;
			}else if(mobile.length!=11){
				$("#mobilecheck").html("手机号码位数不合格");
				checkMobileResult=false;
			}else{
				if(checkMobileResult){
					$("#mobilecheck").html("");
					checkMobileResult=true;
					checkEmailResult=true;
				}else{
					$.getJSON("user/checkMobile",function(r){
						if(r.code==214){
							$("#mobilecheck").html("");
							checkMobileResult=true;
							checkEmailResult=true;
						}else{
							$("#mobilecheck").html("手机号已使用");
							checkMobileResult=false;
						}
					});
				}
				
				
			}
			$(obj).css("border-color","#34495e");
	  	 }
	  	 function checkCode(obj){
	  	 	var validPhoneCode=$("#validPhoneCode").val();
	  	 	if(validPhoneCode==""||validPhoneCode==" "){
				$("#phoneCodecheck").html("验证码不能为空");
				checkCodeResult=false;
			}else if(validPhoneCode!==sendcode){
				$("#phoneCodecheck").html("验证码输入有误");
				checkCodeResult=false;
			}else{
				$("#phoneCodecheck").html("");
				checkCodeResult=true;
			}
	  	 	$(obj).css("border-color","#34495e");
	  	 }
	  	 function checkPwd(obj){
	  	 	var pwd=$("#pwd").val();
	  	 	var reg1=/^[\S]*$/;
			if(pwd.length<6||pwd.length>16){
				$("#pwdcheck").html("6~16位字符");
				checkPwdResult=false;
			}else if(!reg1.test(pwd)){
				$("#pwdcheck").html("密码中不能含空格");
			}else{
				$("#pwdcheck").html("");
				checkPwdResult=true;
			}
			$(obj).css("border-color","#34495e");
	  	 }
	  	 
	  	 function checkRePwd(obj){
	  	 	var repwd=$("#repassword").val();
			var pwd=$("#pwd").val();
			if(repwd!=pwd){
				$("#repwdcheck").html("两次输入的密码不一致");
				checkRePwdResult=false;
			}else{
				$("#repwdcheck").html("");
				checkRePwdResult=true;
			}
			$(obj).css("border-color","#34495e");
	  	 }
	  	 
	 	 function CheckFile(f){
	  		if(f!=""){
	  	        if(!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(f))
	  	        {
	  	        	$("#piccheck").html("图片类型必须是.gif,jpeg,jpg,png中的一种");
	  	        	$("#img0").attr("src","${pageContext.request.contextPath}/resources/resources/images/user/user-icon.png");
	  	            checkImg=false;
	  	        }else{
	  	        	 checkImg=true;
	  	        	 $("#piccheck").html("");
	  	        }
	  	        
	  		}
	  	}
	  	
	  	$("#headFile").change(function(){
	  		if(checkImg){
			var objUrl;
			if(navigator.userAgent.indexOf("MSIE")>0){//IE
				var imgSrc=document.getElementById('headFile');
			 	imgSrc.select();
			 	var src=document.selection.createRange().text;
			 	if(/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(src))
		        {
			 		var img = document.getElementById('img0'); 
					img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
					img.src = "";//设置img的src为base64编码的透明图片，要不会显示红xx
					img.style.width = "60";
					img.style.height = "60";
					document.getElementById("img0").style.display = "block";
		        }else {
		  	         checkImg=false;
		  	    }
			 }else{
				objUrl = getObjectURL(this.files[0]);
				if (objUrl) {
					if(/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test($("#headFile").val()))
			        {
						$("#img0").attr("src", objUrl) ;
						document.getElementById("img0").style.display = "block";
			        }
					
				}
			}
	  	}
		}) ;
		//建立一個可存取到該file的url
		function getObjectURL(file) {
			var url = null ; 
			if (window.createObjectURL!=undefined) { // basic
				url = window.createObjectURL(file) ;
			} else if (window.URL!=undefined) { // mozilla(firefox)
				url = window.URL.createObjectURL(file) ;
			} else if (window.webkitURL!=undefined) { // webkit or chrome
				url = window.webkitURL.createObjectURL(file) ;
			}
			return url ;
		}
		
		function checkAll(){
			var pwd=$("#pwd").val();
			var email=$("#email").val();
			var ischeck=$("#ischecked").is(':checked');
			var mobile=$("#mobile").val();
			var validPhoneCode=$("#validPhoneCode").val();
			var imgUrl=$("#headFile").val();
			var imgpath="resources/images/head/user-icon.png";
			if(checkEmailResult&&checkMobileResult&&checkPwdResult&&checkRePwdResult&&checkImg){ 
			    if(ischeck==false){
			    	createAlertWindow("请阅读完达云平台协议！");
			    }else{
			    	pwd=$.md5(pwd);
					var url = "${pageContext.request.contextPath}/user/register";
					$.ajaxFileUpload({
						type:'post',
						url:url,
						data:{password:pwd,email:email,mobile:mobile,code:validPhoneCode},
						secureuri:false,
					    fileElementId:"headFile",
						dataType: 'json',                          
			            success: function (data) {
			            	if(data.result=="failure"){
			            		createAlertWindow(data.msg);
			            	}else {
			            		if(email===""||email===null){
			            			createAlertWindow(data.msg);
			            			userLogout();
			            		}else{
			            			$(".registActivation").css("display","block");
			            			$(".registInput").css("display","block");
			            		}
							}
						},
						error : function(data) {
							createAlertWindow("注册失败请稍后再试！");
						}
					}); 
			   }
			 }else{
				createAlertWindow("信息填写有误，请重新填写！");
			} 
		}
		
		function userLogout() {
			$.get("user/logout",function(msg) {
				if (msg.code == 1) {
					window.location.href = "${pageContext.request.contextPath}/login.jsp";
				} 
			});
		}
		
		 function setSize(){
	  		$(".regist-container").css("height",$(window).height());
	  		var imgTempHeight=980;
	 		var imgTempWidth=1440;
	 		var temp = imgTempHeight/document.body.clientHeight;
	  	    var width = imgTempWidth/temp;
			$(".regist-container").css({
				"background-size":width+"px "+imgTempHeight/temp+"px",
			});
	  	}
	  	function getcode(){
	  		checkMobile(this);
			var mobile=$("#mobile").val();
			if(checkMobileResult){
				GetServerTime();
				var urls="${pageContext.request.contextPath}/user/main/user/retrieveuser/";
			    jQuery.ajax({
				   type: "GET",
				   url: urls,
				   data:{userPhone:mobile},
				   dataType: 'json',
				   success:function(data){
					 if(data&&data.result=="success"){
					     sendcode=data.datas;
					     RemainTime();
					 }else{
						 createAlertWindow(data.msg);
					 }
				},
				error:function(data){
					createAlertWindow("请稍后再试!!!!");
				}
			   }); 
			}
		}
		var time=60;
		function GetServerTime() {
			if(time>0){
			     setTimeout("GetServerTime()",1000);
			     $("#codebutton").attr("disabled",true);
			     document.getElementById("phoneCodecheck").style.color="#bfbfbf";
			     document.getElementById("phoneCodecheck").innerHTML="（"+time+"秒后可重新获取）";
			     time--;
		   }else{
		   		time=60;
			    $("#codebutton").attr("disabled",false);
			    document.getElementById("phoneCodecheck").innerHTML="";
		   }
		}
		//验证码有效期倒计时
		var iSecond=1800;
		function RemainTime() {
		    if(iSecond>0){
			     setTimeout("RemainTime()",1000);
			     iSecond--;
		    }else{
		   		 sendcode="";
		   		 iSecond=1800;
		    }
		}
	  	function resetValue(){
	  		$("#email").val("");
	  		$("#mobile").val("");
	  		$("#pwd").val("");
	  		$("#repassword").val("");
	  		$("img0").attr("src","resources/images/head/user-icon.png");
	  		$("#ischecked").attr("checked",true);
	  	}
	  	 window.onresize = function (){setSize();};
	  	 $(function(){
	  	 	setSize();
	  	 	resetValue();
	  	 	<% session.removeAttribute("datas"); %>
	  	 });
	  </script>
  </body>
</html>

